<template>
  <!-- 头部 -->
  <div class="topnav">
    <div class="top_box">
      <div class="logo">菜篮子</div>
      <div class="search">
        <div class="search_box">
          <input
            type="text"
            class="inp-search"
            placeholder="菜篮子大促ING..."
            v-model="keyword"
            @change="searchList = []"
            @keyup.enter="search"
          />
          <div class="ser">
            <div
              class="searchtext"
              v-for="(item, index) in searchList"
              :key="index"
            >
              <router-link
                :to="'/detailpage?id=' + item.homeId"
                class="texttitle"
              >
                <p style="z-index: 5; padding-left: 10px">
                  {{ item.description }}
                </p>
              </router-link>
            </div>

            <div class="searchtext" v-if="show">
              <div class="texttitle">找不到您想要的</div>
            </div>
          </div>
        </div>

        <div class="inp-btn" @click="search">
          <span class="iconfont icon-fangdajing"></span>搜索
        </div>
      </div>
      <div class="right">
        <ul class="clearfix">
          <li>
            <!-- 未登录 -->
            <div>
              <a>登录</a>
              <span></span>
              <div class="block">
                <p class="triangle"></p>
                <ol>
                  <li class="back">
                    <router-link to="/login" style="color: #fff"
                      >请登录</router-link
                    >
                  </li>
                  <hr class="wire" />
                  <li>
                    <h3><a href="#">登录手机版</a></h3>
                    <p><a href="#">安卓</a></p>
                    <p><a href="#">IOS</a></p>
                  </li>
                </ol>
              </div>
              <!-- 已登录 -->
              <div class="block" v-if="user != null">
                <p class="triangle"></p>
                <ol>
                  <li class="back">
                    <div style="color: #fff">已登录</div>
                  </li>
                  <hr class="wire" />
                  <li class="zh_log">
                    <router-link to="/login" tag="p">切换账号</router-link>
                    <p @click="onLogout">退出登录</p>
                  </li>
                </ol>
              </div>
            </div>
          </li>
          <li>
            <div>
              <a>个人中心</a>
              <span></span>
              <div class="block">
                <p class="triangle" style="left: 25px"></p>
                <!-- 未登录 -->
                <ol>
                  <li class="back">
                    <a class="color">个人中心</a>
                  </li>
                  <hr class="wire" />
                  <li>
                    <p>请先登录</p>
                  </li>
                </ol>
              </div>
              <div class="block" v-if="user != null">
                <p class="triangle" style="left: 25px"></p>
                <!-- 已登录 -->
                <ol>
                  <li class="back">
                    <router-link to="/personal" class="color"
                      >个人中心</router-link
                    >
                  </li>
                  <hr class="wire" />
                  <li>
                    <p>
                      <router-link tag="a" to="/personal">个人订单</router-link>
                    </p>
                    <p>
                      <router-link tag="a" to="/personal">我的收藏</router-link>
                    </p>
                    <p>
                      <router-link tag="a" to="/personal">收货地址</router-link>
                    </p>
                  </li>
                </ol>
              </div>
            </div>
          </li>
          <li>
            <!-- 购物车 -->
            <div class="car">
              <!-- 未登录 -->
              <div class="block">
                <p class="triangle" style="left: 13px"></p>
                <ol style="left: -179px">
                  <li style="background-color: #fff">
                    <p>您好！您尚未登录</p>
                  </li>
                </ol>
              </div>
              <!-- 已登录 -->
              <div class="block" v-if="user != null">
                <p class="triangle" style="left: 13px"></p>
                <ol style="left: -179px">
                  <li style="background-color: #fff" v-if="ShopcarLists">
                    <p>您的购物车有{{ ShopcarLists.length }}件商品</p>
                  </li>
                  <li v-if="!ShopcarLists">
                    <p>您的购物车有0件商品</p>
                  </li>
                  <router-link to="/shoppingcar" tag="li" class="backs"
                    >进入</router-link
                  >
                </ol>
              </div>
            </div>
          </li>
        </ul>
        <div class="time">欢迎访问网站，今天是：{{ gettime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHomeMian } from "../api/home.js";
export default {
  data() {
    return {
      // 获取当前时间
      gettime: "",
      ShopcarLists: null,
      show: false, // 显示隐藏
      user: JSON.parse(localStorage.getItem("token")),
      searchList: [],
      keyword: "",
    };
  },
  methods: {
    // 退出登录
    onLogout() {
      localStorage.removeItem("token", "13421722866");
      localStorage.removeItem("userId", "lin123456");
      this.$router.push("/login");
    },

    search() {
      getHomeMian().then((data) => {
        // console.log(data.homeMain);
        this.searchList = [];
        data.homeMain.forEach((item) => {
          if (item.description.indexOf(this.keyword) != -1) {
            this.searchList.push(item);
            // console.log(item.description);
            console.log(this.searchList);
          }
        });
        if (this.searchList.length == 0) {
          this.show = true;
        } else {
          this.show = false;
        }
      });
      // console.log(this.searchList);
    },
    // 计算当前时间
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() > 9
          ? new Date().getMonth() + 1
          : new Date().getMonth() == 9
          ? new Date().getMonth() + 1
          : "0" + (new Date().getMonth() + 1);
      var dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      _this.gettime = yy + "年" + mm + "月" + dd + "日";
    },
    currentTime() {
      setInterval(this.getTime, 100);
    },
  },
  created() {
    if (localStorage.Shopcar) {
      this.ShopcarLists = JSON.parse(localStorage.getItem("Shopcar"));
    }
  },
  mounted() {
    // 获取当前时间
    this.currentTime();
  },
};
</script>
<style lang="scss" scoped>
.topnav {
  /* 头部导航栏 */
  height: 100px;
  padding: 0 20px;
  background-color: #ad0002;
  .top_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    .logo {
      font-family: "font";
      font-weight: 700;
      font-size: 75px;
      color: #fff;
      transform: rotateZ(355deg);
      position: relative;
      img {
        position: absolute;
        top: 48px;
        right: 4px;
        width: 20px;
        height: 20px;
        border-radius: 7px;
      }
    }

    .search {
      /* max-width: 1125px;
    min-width: 300px; */
      width: 505px;
      height: 40px;

      display: flex;
      z-index: 5;
    }
    .search .search_box {
      width: 100%;
      height: 100%;
      .inp-search {
        outline: none;
        width: 100%;
        height: 100%;
        border: none;
        padding-left: 10px;
        font-size: 15px;
        color: #9b9b9b;
        // border-radius: 10px 0px 0px 10px;
      }
      .searchtext {
        // width: 100%;
        // background-color: #fff;
        z-index: 5;
        display: flex;
        height: 40px;
        width: 100%;
        background-color: #fff;
        z-index: 5;
        line-height: 40px;
        .texttitle {
          z-index: 5;
          height: 100%;
          padding-left: 10px;
        }
      }
    }

    .search .inp-btn {
      border: none;
      width: 15%;
      line-height: 40px;
      background-color: #b8a17b;
      cursor: pointer;
      text-align: center;
      color: #fff;
      .iconfont {
        margin-right: 5px;
      }
      // border-radius: 0px 10px 10px 0px;
    }

    .right {
      /* width: 300px;
    height: 75px; */
      padding-right: 25px;
      position: relative;
    }

    .right > ul {
      /* width: 300px; */
      height: 35px;
    }

    .right > ul > li {
      height: 35px;
      color: #fff;
      float: left;
      line-height: 35px;
    }

    .right > ul > li > div > a {
      color: #fff;
    }

    .right > ul > li > div > span {
      display: inline-block;
      width: 7px;
      height: 8px;
      background: url("../assets/img/1005.png") no-repeat;
      margin: 0 25px 0 7px;
      cursor: pointer;
    }

    .wire {
      opacity: 0.4;
    }

    .right > ul > li .car {
      background: url("../assets/img/10060.png") center no-repeat;
      width: 36px;
      height: 100%;
    }

    .right > ul > li > div {
      position: relative;
    }

    /* 三角形 */
    .triangle {
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-bottom-color: #fff;
      position: absolute;
      top: 30px;
      left: 10px;
      z-index: 9;
    }

    .right > ul > li > div .block > ol {
      position: absolute;
      top: 45px;
      left: -85px;
      width: 220px;
      background-color: #fff;
      padding: 0 10px;
      // padding-bottom: 20px;
      z-index: 99;
    }

    .block > ol .back {
      width: 100%;
      height: 33px;
      background-color: #ad0002;
      margin-top: 9px;
      text-align: center;
    }
    .backs {
      width: 100%;
      height: 33px;
      background-color: #ad0002;
      margin-top: 9px;
      text-align: center;
      margin-bottom: 10px;
    }
    .zh_log {
      // height: 86px;
      p {
        line-height: 52px;
        cursor: pointer;
      }
    }
    .block > ol > li h3 {
      height: 35px;
      line-height: 35px;
      margin: 10px 0 0 0;
      padding: 0;
      font-weight: bold;
      color: #515151;
      font-size: 15px;
    }

    .block > ol > li p {
      color: #515151;
      font-size: 15px;
    }

    .right > ul > li > div .block {
      display: none;
    }

    .right > ul > li > div:hover .block {
      display: block;
    }

    .right .time {
      width: 225px;
      position: absolute;
      bottom: -36px;
      right: 25px;
      color: #fff;
      font-size: 12px;
      padding-bottom: 10px;
    }
  }

  /* 头部结束 */
}
</style>